Creating a Simple Page in Dreamweaver

In this lesson you’ll see how add:

Headings

Lists

Font colors

Links

When you’re done, your web page will look something like this, but your text will be different:

1) Load Dreamweaver if it isn’t already loaded. It will open the last site you worked on and show a blank HTML document.

Dreamweaver has two editing windows:

· In the design window you edit like in Microsoft Word where What You See is What You Get (WYSIWIG). You’ll use this window most of the time.

· In the code window, you see and edit the raw HTML code for your document. You’ll use this window some of the time to get total control over your web page.

The code window is on the top and the design window is on the bottom.

IMPORTANT: For this assignment, don’t do any of your work in the code window. Add all of your text and formatting to the design window.

The two windows show the same document, but in different ways. Three toolbar buttons control which editing windows are visible:

· The first button sets Dreamweaver to show only HTML code window

· The second button shows both windows

· The third button shows just the design window

Seeing both the Design and Code windows is a great way to learn more about HTML because you can see the HTML code as you edit your document.

2) Save your file before you start adding anything.  Choose the File menu and then Save.

Since this is the main page for your sandbox, call your file “default.html”. This file name is what the browser will load automatically when you go to your site. For example, if you type “www.sample.com” into your browser it will try to load the file “www.sample.com/default.html”.

3) Enter some creative text for your web page by typing in the Design window. That’s the lower window. You’ll see the HTML code appear in the upper window as you type into lower window.

Your text should look something like the sample below. You’ll format the text in the next steps. The first line will become the heading, the second line will stay as plain text, and the last four lines will become a list.

4) Now, add some formatting. Near the top of Dreamweaver is a tabbed toolbar. Each tab shows a different set of Dreamweaver features.

In the design window, highlight your page’s heading, choose the Text tab and click on h1. H1 is the HTML tag for your pages top level heading.

Notice that it is helpful to know some basic HTML tags because Dreamweaver uses them as part of its user interface.

5) Instead of the toolbar, you can use the shortcut menus. For example, to make a list, select the list items, right click, and choose Unordered List

6) To change the text color, select the text, go to the Properties box at the bottom of the screen, and click on the Text Color picker. It’s a small square to the right of the Style control.

7) To make a hyperlink (a link to another web page), select the text you want to show up as a hyperlink, go to the Link control in the Properties box at the bottom of the screen, and enter the URL. You must include the “http://” in front of the URL, as in “http://www.benandjerrys.com”.

8) It’s good practice to preview your changes in a real browser just to make sure nothing surprising happens. Click on the globe button on the toolbar and choose Preview in iexplore

9) You should end up with something like the sample at the top of this document